import {Component} from 'react';
import style from './index.css';
// import moment from 'moment';
import FormItemMy from '@/components/FormItemMy'; //组件部分

// 插件部分
import {Form, Input, DatePicker, Button, Select, Icon} from 'antd';
const Option = Select.Option;
const {RangePicker} = DatePicker;

export default class Search extends Component {
  constructor (props) {
    super (props);
    this.state = {
      formLayout: 'inline', //布局方式
      expand: false, //是否展示更多
      searchValue: {}, //搜索的结果值
      searchList: [
        {
          templateName: 'inputString',
          attribute: {
            label: '姓名',
            labelKey: 'useName',
            labelValue: '',
            labelWidth: 66,
            placeholder: '',
            maxLength: 26,
          },
        },
        {
          templateName: 'selectBase',
          attribute: {
            label: '性别',
            labelKey: 'sex',
            labelValue: '',
            labelWidth: 66,
            placeholder: '',
            selectLsit: [
              {
                label: '不知道',
                value: '不知道',
                disabled: true,
              },
              {
                label: '男生',
                value: '男生',
              },
              {
                label: '女生',
                value: '女生',
              },
            ],
          },
        },
        {
          templateName: 'RangePicker',
          attribute: {
            label: '入职时间',
            labelKey: 'initiationTime',
            labelValue: [],
            labelWidth: 66,
            placeholder: ['开始时间', '结束时间'],
          },
        },
      ],
      fromRes: {
        useName: '',
      },
    };
  }
  // 展示更多
  toggle = () => {
    const {expand} = this.state;
    this.setState ({
      expand: !expand,
    });
  };
  // 立即搜索
  search = () => {
    let searchValue = {};
    this.state.searchList.map (item => {
      searchValue[item.attribute.labelKey] = item.attribute.labelValue;
    });
    this.setState (
      {
        searchValue: searchValue,
      },
      () => {
        console.log (searchValue);
      }
    );
  };
  // 清空
  handleReset = () => {
    this.state.searchList.map (item => {
      if (item.templateName == 'RangePicker') {
        item.attribute.labelValue = [];
      } else {
        item.attribute.labelValue = '';
      }
    });
    this.setState ({
      searchList: this.state.searchList,
    });
  };
  // input输入值发生变化
  onChangeInputValue = labelKey => {
    this.state.searchList.map (item => {
      if (item.attribute.labelKey == labelKey) {
        item.attribute.labelValue = event.target.value;
      }
    });
    this.setState ({
      searchList: this.state.searchList,
    });
  };
  // 选择值发生变化
  onChangeSelectValue = (labelKey, value) => {
    this.state.searchList.map (item => {
      if (item.attribute.labelKey == labelKey) {
        item.attribute.labelValue = value;
      }
    });
    this.setState ({
      searchList: this.state.searchList,
    });
  };
  // 时间日期值发生变化
  // dates 传参格式不可删除
  onChangeRangePickerValue = (labelKey, dates, dateStrings) => {
    this.state.searchList.map (item => {
      if (item.attribute.labelKey == labelKey) {
        item.attribute.labelValue = [dateStrings[0], dateStrings[1]];
      }
    });
    this.setState (
      {
        searchList: this.state.searchList,
      },
      () => {
        console.log (this.state.searchList[2].attribute.labelValue[0] ? 1 : 2);
      }
    );
  };
  render () {
    const {formLayout, expand} = this.state;
    let {fromRes} = this.state;
    return (
      <Form
        layout={formLayout}
        className={`${style.search_box} cenLeft  flex_wrap `}
      >
        {this.state.searchList.map ((item, index) => {
          if (item.templateName == 'inputString') {
            return (
              <FormItemMy
                key={index}
                label={item.attribute.label || ''}
                labelWidth={item.attribute.labelWidth || 0}
              >
                <Input
                  onChange={this.onChangeInputValue.bind (
                    this,
                    item.attribute.labelKey
                  )}
                  name={item.attribute.labelKey}
                  value={item.attribute.labelValue}
                  placeholder={item.attribute.placeholder || '请输入'}
                  maxLength={item.attribute.maxLength || 26}
                />
              </FormItemMy>
            );
          } else if (item.templateName == 'selectBase') {
            return (
              <FormItemMy
                key={index}
                label={item.attribute.label || ''}
                labelWidth={item.attribute.labelWidth || 0}
              >
                <Select
                  onChange={this.onChangeSelectValue.bind (
                    this,
                    item.attribute.labelKey
                  )}
                  showSearch
                  value={item.attribute.labelValue}
                  placeholder={item.attribute.placeholder || '请选择'}
                  allowClear
                >
                  {item.attribute.selectLsit.map (
                    (selectLsitItem, selectLsitItemIndex) => {
                      return (
                        <Option
                          disabled={selectLsitItem.disabled}
                          key={selectLsitItemIndex}
                          value={selectLsitItem.value}
                        >
                          {selectLsitItem.label}
                        </Option>
                      );
                    }
                  )}
                </Select>
              </FormItemMy>
            );
          } else if (item.templateName == 'RangePicker') {
            return (
              <FormItemMy
                noComputWidth
                key={index}
                label={item.attribute.label || ''}
                labelWidth={item.attribute.labelWidth || 0}
              >
                <RangePicker
                  style={{width: '100%'}}
                  onChange={this.onChangeRangePickerValue.bind (
                    this,
                    item.attribute.labelKey
                  )}
                  allowClear
                  showTime={{format: 'HH:mm'}}
                  format="YYYY-MM-DD HH:mm"
                  placeholder={item.attribute.placeholder || ['开始时间', '结束时间']}
                />
                {/* <RangePicker
                  onChange={this.onChangeRangePickerValue.bind (
                    this,
                    item.attribute.labelKey
                  )}
                  allowClear
                  // value={[
                  //   moment (item.attribute.labelValue[0]),
                  //   moment (item.attribute.labelValue[1]),
                  // ]}
                  showTime={{format: 'HH:mm'}}
                  format="YYYY-MM-DD HH:mm"
                  placeholder={item.attribute.placeholder || ['开始时间', '结束时间']}
                /> */}
              </FormItemMy>
            );
          }
        })}

        {/* 
                  {expand
                    ? <FormItemMy label="姓名1">
                        <Input value={fromRes.useName} placeholder="请输入" />
                      </FormItemMy>
                    : ''}
                  */}
        <FormItemMy noComputWidth label=" ">
          <Button onClick={this.search} icon="search" type="primary">
            立即搜索
          </Button>
          <Button
            onClick={this.handleReset}
            style={{
              marginLeft: 16,
            }}
          >
            清空
          </Button> {this.state.searchList.length > 4
            ? <a
                style={{
                  marginLeft: 8,
                  fontSize: 12,
                }}
                onClick={this.toggle}
              >
                <Icon type={this.state.expand ? 'up' : 'down'} />
              </a>
            : ''}
        </FormItemMy>
      </Form>
    );
  }
}
